<template>
  <div class="personal">
    <van-nav-bar
      class="toubu"
      title="我的资料"
      left-arrow
      @click-left="$router.back()"
    />
    <div class="abc">
      <van-uploader :after-read="afterRead">
        <van-cell class="one" title="头像" is-link>
          <!-- 使用 right-icon 插槽来自定义右侧图标 -->
          <template #right-icon>
            <van-image
              width="40"
              height="40"
              fit="cover"
              round
              :src="'http://huangjiangjun.top:1337' + userInfo.avatar"
            />
            <van-icon name="arrow" class="arrow" />
          </template>
        </van-cell>
      </van-uploader>
      <div class="juti">
        <van-cell class="top" title="昵称" is-link :value="userInfo.nickname" />
        <van-cell title="性别" is-link :value="userInfo.gender ? '女' : '男'" />
        <van-cell title="地区" is-link :value="city" />
        <van-cell
          class="foot"
          title="个人介绍"
          is-link
          :value="userInfo.intro"
        />
      </div>
      <div class="btn">
        <van-button plain type="info" @click="exit()">退出登录</van-button>
      </div>
    </div>
  </div>
</template>

<script>
import { areaList } from '@vant/area-data'
import { userImg, chengeUser } from '@/api/user.js'
export default {
  data () {
    return {
      areaList
    }
  },
  methods: {
    // 退出登录
    exit () {
      this.$dialog
        .confirm({
          title: '提示',
          message: '确认退出吗?'
        })
        .then(() => {
          this.$store.commit('login/reomveUserInfo')
          this.$store.commit('login/removeToken')
          this.$toast.success('退出成功')
          this.$router.push('/login')
        })
        .catch(() => {
          // on cancel
        })
    },
    // 修改头像
    async afterRead (file) {
      const fm = new FormData() // 空的
      fm.append('files', file.file)
      // 此时可以自行将文件上传至服务器
      console.log(fm)
      const res = await userImg(fm)
      // 返回文件对象拿到头像id
      await chengeUser({
        avatar: res.data.data[0].id
      })
      this.$store.dispatch('login/getUse')
      this.$toast.success('修改成功')
    }
  },
  computed: {
    userInfo () {
      return this.$store.getters.userInfo || {}
    },
    city () {
      let arr
      const heard = Object.keys(this.areaList)
      for (let i = 0; i < heard.length; i++) {
        const obj = this.areaList[heard[i]]
        if (obj[this.userInfo.area] !== undefined) {
          arr = obj[this.userInfo.area]
        }
      }
      return arr
    }
  },
  created () {}
}
</script>

<style lang="less">
.personal {
  background-color: #f7f4f5;
  height: 100vh;

  .toubu {
    .van-cell__title.van-ellipsis {
      font-weight: 700 !important;
    }
  }
  .abc {
    padding: 0 20px;
    .van-uploader {
      margin: 20px auto;
      width: 100%;
      .van-uploader__wrapper {
        width: 100%;
      }
      .van-uploader__input-wrapper {
        width: 100%;
        .van-cell__title {
          line-height: 40px;
          // font-size: 18px;
          // font-weight: 700 !important;
        }
      }
      .van-cell {
        &.one {
          border-radius: 8px;
          .van-icon {
            line-height: 40px;
          }
        }
      }
    }
    .juti {
      .top {
        border-top-left-radius: 8px;
        border-top-right-radius: 8px;
      }
      .foot {
        border-bottom-left-radius: 8px;
        border-bottom-right-radius: 8px;
      }
    }

    .btn {
      margin-top: 20px;
      .van-button {
        width: 100%;
        border-radius: 8px;
        background-color: #fff;
        color: red;
        border: 0;
        font-weight: 600;
      }
    }
  }
}
</style>
